import React, { Component } from 'react';
import MyECharts from '@components/my-echarts';
import axios from 'axios';
import echarts from 'echarts';
import _ from 'lodash';

const option = {
  backgroundColor: '#222739',

  series: [
    {
      type: 'map',
      silent: false,
      map: 'world',
      roam: true,
      center: [115.97, 29.71],
      zoom: 3,
      scaleLimit: {
        min: 1
      },
      itemStyle: {
        normal: {
          areaColor: '#293247',
          borderColor: '#39476a'
        }
      },
      label: {
        show: true,
        color: '#39476a'
      },
      emphasis: {
        label: {
          show: false,
          color: 'rgba(196,209,254,0)'
        },
        itemStyle: {
          areaColor: 'rgba(60, 80, 118, 0.5)',
          borderColor: '#beccff',
          borderWidth: 1
        }
      },
      data: [
        {
          name: 'China',
          label: {
            show: false,
            color: 'rgba(196,209,254,0)'
          },
          itemStyle: {
            areaColor: 'rgba(60, 80, 118, 0.5)',
            borderColor: '#beccff',
            borderWidth: 1
          }
        }
      ]
    }
  ]
};

class MapBody extends Component {
  constructor(props) {
    super(props);
    this.state = {
      option: {}
    };
    this.loadedMaps = {};
  }
  componentDidMount() {
    this.loadMap();
  }
  loadMap = () => {
    axios.get('/maps/china-cities.json').then(res => {
      echarts.registerMap('world', res.data);
      this.setState({
        option
      });
    });
  };

  updateSelect = e => {
    if (!e || !e.name) {
      return;
    }
    let name = e.name;
    let option = _.clone(this.state.option);
    if (_.get(option, 'series[0].center')) {
      delete option.series[0].center;
    }
    _.set(option, 'series[0].data[0].name', name);
    this.setState({
      option
    });
  };

  render() {
    return (
      <MyECharts
        option={this.state.option}
        className="map-body"
        events={{
          click: this.updateSelect
        }}
      />
    );
  }
}

export default MapBody;
